import React, { PureComponent } from 'react';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Row, Col, Icon, Modal, List, Button, Spin, Input, Popconfirm, Empty, Tag, Divider, Table } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

const { Meta } = Card;

@connect(({ competition }) => ({
  charts: competition.charts,
}))
class Charts extends PureComponent {


  componentDidMount() {
    const { match: { params: { id } }, dispatch } = this.props;
    dispatch({
      type: 'competition/getCharts',
      payload: {
        competitionId: id,
      }
    })
  }

  render() {
    const { charts } = this.props;
    console.log(charts)
    const columns = [{
      title: '排名',
      dataIndex: 'id',
      key: 'id',
      render:(text,record,index)=>`${index+1}`,
    }, {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      render: text => <a href="javascript:;">{text}</a>,
    }, {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '分数',
      dataIndex: 'score',
      key: 'score',
      defaultSortOrder: 'descend',
      sorter: (a, b) => a.score - b.score,
    },];

    return (
      <PageHeaderWrapper>
        <Row type="flex" justify="center">

          <Col span={12}>
            <Card
              style={{ height: 600 }}
            >
              <h2>排行榜</h2>
              <Table columns={columns} dataSource={charts} rowKey={record => record.username}  />
            </Card>
          </Col>
        </Row>

      </PageHeaderWrapper>
    );
  }
}

export default Charts;
